<!--  -->
<template>
  <div id="box">
    <div class="songdail">
      <div class="songdail-header clearfix">
        <div class="header-left">
          <img :src="picurl" alt="" />
        </div>
        <div class="header-right">
          <p class="songname">{{ songname }}</p>
          <p class="songer">{{ songer }}</p>
          <ul class="info">
            <li class="info-item">专辑：叶惠美</li>
            <li class="info-item">语种：国语</li>
            <li class="info-item">流派：pop</li>
            <li class="info-item">唱片公司：威尔</li>
            <li class="info-item">发行时间:200-7-31</li>
          </ul>
          <div class="toolvar">
            <ul>
              <li class="too-li watch" @click="handleplay">
                <i class="el-icon-caret-right"></i>
                 播放
              </li>
              <li class="too-li favorite">
                <i class="el-icon-star-on"></i>收藏
              </li>
              <li class="too-li comment">
                <i class="el-icon-chat-dot-square"></i>评论
              </li>
              <li class="too-li more"><i class="el-icon-refresh"></i>更多</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="mian">
      <div class="songword">
        <div class="songword-left">
          <h2>歌词</h2>
          <div class="left-info">
            <div v-for="(item, index) in songlist" :key="index">
              <p>{{ item }}</p>
            </div>
          </div>
          <span class="open-songdail" @click="openSongdail">[展开]</span>
          <div class="send-comment clearfix">
            <h2>评论</h2>
            <textarea
              placeholder="期待您的神评论...."
              v-model="comment"
            ></textarea>
            <div class="send-button" @click="cendcomment">发表评论</div>
          </div>
          <div class="comment-box">
            <h2>精彩评论</h2>
            <div class="comment-content">
              <div
                class="content-item clearfix"
                v-for="(item, index) in hotcommment"
                :key="index"
              >
                <div class="item-left">
                  <img :src="item.user.avatarUrl" alt="" />
                </div>
                <div class="item-right">
                  <div class="userdata">{{ item.user.nickname }}</div>
                  <div class="user-comment">
                    {{ item.content }}
                  </div>
                  <div class="comment-button">
                    <div class="button-left">{{ item.time }}</div>
                    <div class="button-right">
                      <span class="hidden">举报 </span>
                      <span>点赞:{{ item.likedCount }}</span>
                      <i class="el-icon-chat-line-square"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="songword-right">
          <h2>简介</h2>
          <p class="simple-intronation">
            一首偏校园怀旧风的歌曲，
            会想到你的校园、你暗恋的对象、青涩的天真和单纯的永恒。
          </p>
        </div>
      </div>
      <div class="block">
        <!-- <span class="demonstration">大于 7 页时的效果</span> -->
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import busline from "@/busline/busline";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      songWord: "",
      picurl: "",
      songer: "",
      songname: "",
      songlist: [],
      hotcommment: [],
      comment: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    songIds:function(){
      return this.$store.state.songIdVal
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleplay() {
      // location.href="/audioplayer"
      
    },
    cendcomment() {
      this.comment = "";
      alert("发送评论成功");
    },
    openSongdail() {
      let leftinfo = document.querySelector(".left-info");
      let open = document.querySelector(".open-songdail");
      if (leftinfo.style.height == "" || leftinfo.style.height == "418px") {
        leftinfo.style.height = "800px";
        open.innerHTML = "[收起]";
      } else {
        leftinfo.style.height = "418px";
        open.innerHTML = "[展开]";
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 请求评论
    // busline.$on("sendSongId", (resu) => {
    //   console.log(resu)
    // });
    // 获取专辑
    /*  this.$http.get("/album?id=33894312").then((res) => {
      console.log(res);
    }), */
    // 获取歌曲详情
       // 热门评论
      this.$http
        .get("comment/hot", {
          params: {
            // id: 33894312,
            // id: 1357999894,
            // id:this.$store.state.songIdVal,
            id:this.songIds,
            type: 0,
          },
        })
        .then((res) => {
          // console.log(res);
          let hotcommment = res.data.hotComments;
          hotcommment.map(function (item) {
            let time = item.time;
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDay() + 1;
            let huors = date.getHours();
            if (huors < 10) {
              huors = "0" + huors;
            }
            let minutes = date.getMinutes();
            if (minutes < 10) {
              minutes = "0" + minutes;
            }
            let seconds = date.getSeconds();
            if (seconds < 10) {
              seconds = "0" + seconds;
            }
            let counttime = `${year}年${month}月${day}日  ${huors}:${minutes}:${seconds}`;
            item.time = counttime;
          });
          this.hotcommment = hotcommment;
        });
         this.$http
      .get("/song/detail", {
        params: {
          // ids: 33894312,
          // id:this.$store.state.songIdVal,
          ids:this.songIds,
        },
      })
      .then((res) => {
        // console.log(res);
        let songer = res.data.songs[0].ar[0].name;
        this.songer = songer;
        let picurl = res.data.songs[0].al.picUrl;
        this.picurl = picurl;
        let songname = res.data.songs[0].name;
        this.songname = songname;
      }),
      // 获取歌词
      this.$http
        .get("/lyric", {
          params: {
            // id: 33894312,
            // id:1357999894,
            // id:this.$store.state.songIdVal,
            id:this.songIds,
          },
        })
        .then((res) => {
          var reg = /\[(\d{2}):(\d{2})\.(\d{3})\]\s*(.+)/;
          var songWord = res.data.lrc.lyric.split("\n");
          var songlist = [];
          for (var i = 0; i < songWord.length; i++) {
            (function (index) {
              let songw = songWord[index];
              var matches = reg.exec(songw);
              if (matches != null) {
                songlist.push(matches[4]);
              }
            })(i);
          }
          this.songlist = songlist;
        });
    // });
   
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // busline.$on("sendSongId", (val) => {
      // console.log(val);
   
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
li {
  list-style: none;
}
.songdail {
  background-color: #f5f5f5;
  overflow: hidden;
  font-size: 14px;
  position: relative;
  width: 100%;
  color: #000;
  .songdail-header {
    width: 1200px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 35px;
    text-align: left;

    .header-left {
      img {
        float: left;
        width: 250px;
        height: 250px;
      }
    }

    .header-right {
      float: left;
      margin-left: 50px;
      p.songname {
        font-size: 31px;
        line-height: 50px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70%;
        margin-right: 10px;
        color: #000;
      }

      p.songer {
        font-size: 18px;
        line-height: 26px;
        color: #333;
      }

      .info {
        width: 450px;

        padding-top: 8px;
        overflow: hidden;
        .info-item {
          float: left;
          line-height: 27px;
          width: 166px;
          margin-right: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
        }
      }

      .toolvar {
        ul {
          display: flex;
          margin-top: 30px;
          li {
            margin-right: 10px;
            cursor: pointer;
            i {
              margin-right: 5px;
              font-size: 18px;
            }
          }
          .too-li {
            width: 122px;
            text-align: center;
            height: 38px;
            font-size: 16px;
            border-radius: 3px;
            line-height: 38px;
            font-family: \5fae\8f6f\96c5\9ed1;
          }
          .watch {
            border: 1px solid #31c27c;
            background-color: #31c27c;
            color: #fff;
          }

          .favorite {
            border: 1px solid #ccc;
          }

          .comment {
            border: 1px solid #ccc;
          }

          .more {
            border: 1px solid #ccc;
          }
        }
      }
    }
  }
}
.mian {
  .block {
    margin: 0 auto;
    width: 1200px;
  }
  width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  .songword {
    display: flex;
    justify-content: space-between;
    .songword-left {
      width: 875px;
      text-align: left;
      h2 {
        font-weight: 100;
        color: #000;
        line-height: 46px;
      }

      .left-info {
        height: 416px;
        overflow: hidden;
      }
      .open-songdail {
        color: #31c27c;
        cursor: pointer;
      }

      .send-comment {
        margin-top: 50px;
        h2 {
          float: left;
          font-size: 24px;
          font-weight: 400;
          line-height: 58px;
          font-family: \5fae\8f6f\96c5\9ed1;
        }

        textarea {
          border-color: #ececec;
          box-sizing: border-box;
          padding: 15px;
          outline: none;
          background-color: #f5f5f5;
          resize: none;
          float: left;
          width: 100%;
          height: 104px;
        }

        .send-button {
          cursor: pointer;
          float: right;
          margin-top: 20px;
          width: 80px;
          line-height: 27px;
          height: 27px;
          text-align: center;
          padding: 0;
          border: 1px solid #31c27c;
          background-color: #31c27c;
          color: #fff;
        }
      }
      .comment-box {
        h2 {
          line-height: 34px;
          padding-bottom: 10px;
          border-bottom: 1px solid #fefefe;
        }

        .comment-content {
          .content-item:hover
            .item-right
            .comment-button
            .button-right
            .hidden {
            opacity: 1;
          }
          .content-item {
            // display: flex;
            // justify-content: space-between;
            .item-left {
              float: left;
              img {
                height: 38px;
                width: 38px;
                border-radius: 50%;
              }
              margin-right: 20px;
            }

            .item-right {
              float: left;
              width: 800px;
              margin-bottom: 20px;
              .userdata {
                line-height: 21px;
                margin-bottom: 10px;
                color: #666;
                font-weight: 700;
              }

              .user-comment {
                color: #000;
                margin-bottom: 10px;
                line-height: 24px;
              }

              .comment-button {
                display: flex;
                justify-content: space-between;

                .button-left {
                  color: #ccc;
                  // text-indent: 20px;
                }

                .button-right {
                  span {
                    margin-right: 20px;
                    cursor: pointer;
                  }
                  .hidden {
                    opacity: 0;
                    cursor: pointer;
                  }
                  i {
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }

    .songword-right {
      width: 290px;
      text-align: left;
      h2 {
        font-weight: 100;
        color: #000;
        line-height: 46px;
      }

      // p.simple-intronation {
      // }
    }
  }
}
</style>